<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { ref,onMounted,watch } from 'vue'
import useUserInfoStore from "@/stores/user"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const userInfoStore = useUserInfoStore();
const initialImg = ref('https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png')
const { username, img } = storeToRefs(userInfoStore); 
onMounted(() => {
    if(username.value!=null && username.value!=''){
        initialImg.value = img.value
    }
})
watch(() => username.value, ( oldValue) => {
    if(username.value!=null && username.value!=''){
        initialImg.value = img.value
    }
    else{
        initialImg.value = 'https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png'
    }
})
</script>

<template>
    <header>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <!-- <p>刷新次数: {{ count }}</p> -->
        </van-pull-refresh>

        <div class="wrapper">
            <nav>
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to='/todolist'>TodoList</RouterLink>
                <RouterLink to="/MyProfile">MyProfile</RouterLink>
                <RouterLink to="/login" class="user"><el-avatar :src="initialImg" style="width:35px;height: 35px;margin-top: 7.5px;"/></RouterLink>
                <el-link href="https://gitee.com/snowy-mountains-can-be-seen/vue-todo.git" target="_blank" :underline="false" style="font-size: 12px;">git仓库</el-link>
            </nav>
            
        </div>
    </header>
  <RouterView />
</template>

<style scoped>
.user{
    float: left;
    width: 30px;
}
.user el-avatar{
    border-radius: 50%;
}
.wrapper{
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    text-align: center;
}
nav {
  line-height: 50px;
  font-size: 12px;
}

nav a.router-link-exact-active {
  color: black;
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  padding: 0 1rem;
  color: hsla(160, 100%, 37%, 1);
  text-decoration: none;
}

</style>

